<template>
    <div class="referCon">
        <div class="wkHead">
            <el-form ref="workFormRef" :model="worksRuleForm" label-width="auto" status-icon>
                <el-row>
                    <el-col style="margin-right: 20px;" :span="5">
                        <el-form-item label="学生名称" prop="name">
                            <el-input placeholder="请输入学生姓名" v-model="worksRuleForm.name" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="5">
                        <el-form-item label="类型" prop="type">
                            <el-select v-model="worksRuleForm.type" placeholder="选择类型">
                                <el-option v-for="item in typeArr" :key="item.value" :label="item.label"
                                    :value="item.status">
                                    <span style="float: left">{{ item.label }}</span>
                                    <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">
                                        {{ item.value }}
                                    </span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="margin-left: 15px;">
                        <el-form-item>
                            <el-button :icon="Search" type="primary" @click="onSearch">
                                搜索
                            </el-button>
                            <el-button :icon="Refresh" @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </div>

        <div class="wkTit">
            <div class="left">
                <el-button @click="exportWklist" type="warning" plain style="margin-right: 10px;">
                    <span style="margin-right: 6px;" class="iconfont icon-topsales"></span> 导出
                </el-button>

                <el-button @click="onClose" type="warning" plain icon="Close">
                    关闭
                </el-button>
            </div>
            <div class="right">
                <p>总人数:<b>{{ totalCount }}</b>人&nbsp;&nbsp;未提交:<b>{{ noSubCount }}</b>人&nbsp;&nbsp;已提交:<b>{{ subCount
                }}</b>人&nbsp;&nbsp;完成:<b>{{ confirmCount }}</b>人&nbsp;&nbsp;提交率:<b>{{ subRate
                        }}</b>&nbsp;&nbsp;批阅率:<b>{{ referRate }}</b>&nbsp;&nbsp;
                </p>
            </div>
        </div>
        <div class="wkTable">
            <div v-if="worksArr.length > 0">
                <el-table :data="worksArr" id="tableData" style="width: 100%;height: 70vh;overflow-x: auto; "
                    class="studentTable">
                    <el-table-column align="center" prop="nick_name" label="学生姓名" />
                    <el-table-column align="center" prop="status" label="状态">
                        <template #default="scope">

                            <el-tag v-if="scope.row.status == '已提交'" type='primary'>已提交</el-tag>
                            <el-tag v-if="scope.row.status == '未提交'" type='danger'>未提交</el-tag>
                            <el-tag v-if="scope.row.status == '已完成'" type='success'>已完成</el-tag>
                            <el-tag v-if="scope.row.status == '已驳回'" type='danger'>已驳回</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="create_time" label="提交时间">
                        <template #default="scope">
                            {{ scope.row.create_time }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="fraction" label="分数">
                        <template #default="scope">
                            {{ scope.row.fraction }}
                        </template>
                    </el-table-column>


                    <el-table-column align="center" prop="final_score" label="操作">
                        <template #default="scope">
                            <ul>
                                <li class='review-btn'>
                                    <el-button @click="goWkDetail(scope.row.id, scope.row.status)"
                                        :disabled="scope.row.status == '未提交' ? true : false" type="primary" link>
                                        查阅
                                    </el-button>
                                </li>
                                <li class='revise-btn'>
                                    <el-button @click="rfwkDialog(scope.row.id)"
                                        :disabled="scope.row.status == '未提交' ? true : false" type="primary" link>
                                        批阅记录
                                    </el-button>
                                </li>
                            </ul>
                        </template>


                    </el-table-column>
                </el-table>
            </div>

            <el-empty v-else description='暂无学生提交作业' />

        </div>
    </div>

    <!-- 批阅作业弹出层 -->

    <el-dialog v-model="dialogVisible" title="批阅记录" width="700">
        <div class="content">
            <!-- <div v-for="item in reviewArr" class="collItem">


                <el-tag v-if="item.status == 1" style="margin-right: 10px;" type="danger">驳回</el-tag>

                <el-tag v-if="item.status == 0" style="margin-right: 10px;" type="success">通过</el-tag>
                {{ parseTime(item.time) }}批阅

                <div>
                    {{ item.content }}
                </div>
            </div> -->
                   <el-collapse @change="handleChange">
          <el-collapse-item v-for="item in reviewArr" class="collItem">
            <template #title>
              <el-tag
                v-if="item.status == 1"
                style="margin-right: 10px"
                type="danger"
                >驳回</el-tag
              >

              <el-tag
                v-if="item.status == 0"
                style="margin-right: 10px"
                type="success"
                >通过</el-tag
              >
              {{ parseTime(item.time) }}批阅
            </template>
            <div v-html="item.remark">

            </div>
          </el-collapse-item>
        </el-collapse>

        </div>
    </el-dialog>


</template>

<script setup>
import { ref } from "vue"
import { giveEllipsisStr, getTagState, parseTime } from '@/utils/common';
import { studyList, reviewRecord, upFraction } from "@/api/banke/zuoye"
import { _export_works } from "@/utils/excel_util";
import { Search, Refresh } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const dialogVisible = ref(false)
const totalCount = ref()
const noSubCount = ref()
const subCount = ref()
const confirmCount = ref()
const subRate = ref()
const referRate = ref()
const worksRuleForm = ref({
    name: "",
    type: ""
})

const worksArr = ref([
])
const typeArr = ref([

])

// 批阅记录数据
const reviewArr = ref([
])

const rfwkDialog = (id) => {
    console.log(id);
    dialogVisible.value = true
    getreviewRecord(id)
}
// 重置表单
const resetForm = () => {
    proxy.$refs.workFormRef.resetFields();
    searchstuWkList()
}

// 获取批阅记录
const getreviewRecord = (id) => {
    reviewRecord(id).then(res => {
        console.log(res);
        reviewArr.value = res
    })
}
// 跳转到作业详情
const goWkDetail = (id, status) => {

    router.push({ path: '/designclass/wkdetail', query: { activeNum: 5, id, status } })
}

const onClose = () => {
    proxy.$tab.closePage(route).then(res => {
        router.go(-1)
    })
}


// 获取已提交的学生作业列表
const getstuWkList = async (name = null, status = null) => {
    let data = {
        name,
        status,
        page_size: "200",
        page_num: "1",
        operation_id: route.query.operateId + ''
    }
    await studyList(data).then(res => {
        totalCount.value = route.query.total_count
        worksArr.value = res.list


        // 已完成
        confirmCount.value = res.list.filter(e => e.status == 1).length

        // 查询已提交人数
        subCount.value = res.list.filter(e => e.status == 0).length +  confirmCount.value

        // subRate.value = Math.round((subCount.value / totalCount.value) * 100 * 10) / 10 + "%"

        subRate.value = (Math.round((subCount.value / (totalCount.value || 1)) * 1000) / 10 || 0) + "%";  // 处理NaN
        // referRate.value = Math.round((confirmCount.value / totalCount.value) * 100 * 10) / 10 + "%"
        referRate.value = (Math.round((confirmCount.value / (totalCount.value || 1)) * 1000) / 10 || 0) + "%";  // 处理NaN


        noSubCount.value = res.list.filter(e => e.status == -1).length

        //未评分(提交的)
        // let noScore=res.list.filter(e => e.status == 0).length
        typeArr.value = [
            { label: "已提交", value: subCount.value + "人", status: 0 },
            { label: "未评分", value: subCount.value + "人", status: "0" },
            { label: "未提交", value: noSubCount.value + "人", status: -1 }
        ]

        worksArr.value.forEach(e => {
            console.log(e);
            e.create_time = parseTime(e.create_time)
            if (e.status == 0) {
                e.status = "已提交"
            } else if (e.status == 1) {
                e.status = "已完成"
            } else if (e.status == 2) {
                e.status = "已驳回"
            } else if (e.status == -1) {
                e.status = "未提交"
            }

        });


    })

}


// 查询已提交的学生列表

const searchstuWkList = async (name = null, status = null) => {
    let data = {
        name,
        status,
        page_size: "200",
        page_num: "1",
        operation_id: route.query.operateId + ''
    }
    await studyList(data).then(res => {
        // 
        worksArr.value = res.list
        worksArr.value.forEach(e => {
            e.create_time = parseTime(e.create_time)
            e.nick_name = e.nick_name ? e.nick_name : "未设置姓名"
            if (e.status == 0) {
                e.status = "已提交"
            } else if (e.status == 1) {
                e.status = "已完成"
            } else if (e.status == 2) {
                e.status = "已驳回"
            } else if (e.status == -1) {
                e.status = "未提交"
            }

        });

    })

}

// 导出作业列表
const exportWklist = () => {
    worksArr.value.forEach(e => {
        if (e.create_time == null) {
            e.create_time = ''
        }
        if (e.fraction == null) {
            e.fraction = ''
        }

    })

    _export_works(worksArr.value, "学生作业列表.xlsx");
}
// 更新成绩
const updateFrc = (fraction, id) => {
    upFraction({
        fraction,
        id,
        operation_id: route.query.operateId

    }).then(res => {
        console.log(res);

    })


}




// 搜索作业
const onSearch = () => {
    worksRuleForm.value.name = worksRuleForm.value.name ? worksRuleForm.value.name : null

    worksRuleForm.value.type = worksRuleForm.value.type + '' ? worksRuleForm.value.type : null

    console.log(worksRuleForm.value.name, worksRuleForm.value.type);

    searchstuWkList(worksRuleForm.value.name, worksRuleForm.value.type)
}
getstuWkList()

</script>

<style lang="scss" scoped>
.referCon {
    min-width: 1200px;

}

.wkTit {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;

    p {
        font-size: 14px;
        color: #666;

        b {
            font-size: 16px;
            color: #333;
        }
    }

}


.wkTable {
    margin-top: 50px;

    .top,
    .row {
        display: flex;
        align-items: center;
    }

    .top {
        display: flex;
        align-items: center;
        background: #F5F7FA;
        color: #888;
        line-height: 45px;
        font-size: 14px;
        display: flex;

    }



    .name {
        width: 20%;
        padding-left: 18px;
        text-align: left;
    }

    .status {
        width: 20%;
    }


    .posttime {
        width: 20%;
    }

    .fenshu {
        width: 20%;
    }

    .operate {
        width: 20%;
        text-align: left;
    }



    .row {
        line-height: 55px;
        font-size: 16px;
        color: #555;


        .name {
            font-size: 16px;
            color: #555555;
            cursor: pointer;

            &:hover {
                color: #4395FF;
            }
        }

        .status {
            color: #FF5733;
        }

        .status.not-started {
            color: #FF5733;
        }

        .status.in-progress {
            color: #4395FF;
        }

        .status.has-ended {
            color: #86DFB2;
        }

        .posttime,
        .deadline {
            color: #888;
            font-size: 14px;
        }

        .done-all {
            font-size: 14px;
            color: #999;

            span {
                font-size: 30px;
                color: #555555;
            }
        }


    }

    .row:hover {
        background: #E7F1FF;

        .operate {
            display: block;
        }
    }


}


ul {
    width: 100%;
    display: flex;
    justify-content: center;

    li {

        text-align: center;

        transition: .3s;
        color: #4395FF;
        margin-right: 10px;
    }

    li.revise-btn:hover {
        color: #4395FF;
    }

    li.del-btn:hover {
        color: #FF5733;
    }
}

.collItem {
    line-height: 60px;
    // border-top: 1px solid #eee;

}
</style>

<style>
.referCon .el-table__row {
    height: 60px;
}
</style>